<template>
  <div class="box">
    <el-row :gutter="20">
      <el-col :span="6">
        <Card>
          <template #header>
            <span>总销售额</span>
            <span
              ><svg
                t="1652685690478"
                class="icon"
                viewBox="0 0 1024 1024"
                version="1.1"
                xmlns="http://www.w3.org/2000/svg"
                p-id="1918"
                width="16"
                height="16"
              >
                <path
                  d="M512 1024A512 512 0 1 1 512 0a512 512 0 0 1 0 1024zM448 448v384h128V448H448z m0-256v128h128V192H448z"
                  fill="#13227a"
                  p-id="1919"
                ></path></svg
            ></span>
          </template>
          <template #content>
            <div>销售额为:128756319</div>
          </template>
          <template #charts>
            <div>
              上涨58%
              <span
                ><svg
                  t="1652686073489"
                  class="icon"
                  viewBox="0 0 1024 1024"
                  version="1.1"
                  xmlns="http://www.w3.org/2000/svg"
                  p-id="5441"
                  width="16"
                  height="16"
                >
                  <path
                    d="M576 234.688V1024H448V234.688L213.312 469.312 128 384l384-384 384 384-85.312 85.312L576 234.688z"
                    fill="#1296db"
                    p-id="5442"
                  ></path></svg
              ></span>
              下降28%
              <span
                ><svg
                  t="1652686148103"
                  class="icon"
                  viewBox="0 0 1024 1024"
                  version="1.1"
                  xmlns="http://www.w3.org/2000/svg"
                  p-id="6679"
                  width="16"
                  height="16"
                >
                  <path
                    d="M448 789.312V0h128v789.312l234.688-234.624L896 640l-384 384-384-384 85.312-85.312L448 789.312z"
                    fill="#d81e06"
                    p-id="6680"
                  ></path></svg
              ></span>
            </div>
          </template>
          <template #footer> 日销售额￥ 12423 </template>
        </Card>
      </el-col>
      <el-col :span="6">
        <Card>
          <template #header>
            <span>访问量</span>
            <span
              ><svg
                t="1652686472118"
                class="icon"
                viewBox="0 0 1024 1024"
                version="1.1"
                xmlns="http://www.w3.org/2000/svg"
                p-id="7590"
                width="16"
                height="16"
              >
                <path
                  d="M512 65.984C266.048 65.984 65.984 266.048 65.984 512S266.048 958.016 512 958.016 958.016 757.952 958.016 512 757.952 65.984 512 65.984zM544 736c0 17.696-14.304 32-32 32s-32-14.304-32-32l0-288c0-17.696 14.304-32 32-32s32 14.304 32 32L544 736zM512 352c-26.496 0-48-21.536-48-48C464 277.472 485.504 256 512 256s48 21.472 48 48C560 330.464 538.496 352 512 352z"
                  p-id="7591"
                  fill="#d81e06"
                ></path></svg
            ></span>
          </template>
          <template #content>
            <div>硅谷后台管理系统访问2个亿</div>
          </template>
          <template #footer> 每日访问量到达1879321 </template>
          <template #charts>
            <LineCharts />
          </template>
        </Card>
      </el-col>
      <el-col :span="6">
        <Card>
          <template #header>
            <span>支付笔数</span>
            <span
              ><svg
                t="1652749575839"
                class="icon"
                viewBox="0 0 1024 1024"
                version="1.1"
                xmlns="http://www.w3.org/2000/svg"
                p-id="3286"
                width="16"
                height="16"
              >
                <path
                  d="M512 65.984C266.048 65.984 65.984 266.048 65.984 512S266.048 958.016 512 958.016 958.016 757.952 958.016 512 757.952 65.984 512 65.984zM544 736c0 17.696-14.304 32-32 32s-32-14.304-32-32l0-288c0-17.696 14.304-32 32-32s32 14.304 32 32L544 736zM512 352c-26.496 0-48-21.536-48-48C464 277.472 485.504 256 512 256s48 21.472 48 48C560 330.464 538.496 352 512 352z"
                  p-id="3287"
                  fill="#695a20"
                ></path></svg
            ></span>
          </template>
          <template #content>
            <div>支付笔数4372笔</div>
          </template>
          <template #footer>
            <div>支付转换率60%</div>
          </template>
          <template #charts>
            <BarCharts></BarCharts>
          </template>
        </Card>
      </el-col>
      <el-col :span="6">
        <Card>
          <template #header>
            <span>活动效果</span>
            <span
              ><svg
                t="1652751159202"
                class="icon"
                viewBox="0 0 1024 1024"
                version="1.1"
                xmlns="http://www.w3.org/2000/svg"
                p-id="1964"
                width="16"
                height="16"
              >
                <path
                  d="M512 65.984C266.048 65.984 65.984 266.048 65.984 512S266.048 958.016 512 958.016 958.016 757.952 958.016 512 757.952 65.984 512 65.984zM544 736c0 17.696-14.304 32-32 32s-32-14.304-32-32l0-288c0-17.696 14.304-32 32-32s32 14.304 32 32L544 736zM512 352c-26.496 0-48-21.536-48-48C464 277.472 485.504 256 512 256s48 21.472 48 48C560 330.464 538.496 352 512 352z"
                  p-id="1965"
                  fill="#60143a"
                ></path></svg
            ></span>
          </template>
          <template #content>
            <div>活动效果转换率70%</div>
          </template>
          <template #footer>
            <div>
              上涨58%
              <span
                ><svg
                  t="1652686073489"
                  class="icon"
                  viewBox="0 0 1024 1024"
                  version="1.1"
                  xmlns="http://www.w3.org/2000/svg"
                  p-id="5441"
                  width="16"
                  height="16"
                >
                  <path
                    d="M576 234.688V1024H448V234.688L213.312 469.312 128 384l384-384 384 384-85.312 85.312L576 234.688z"
                    fill="#1296db"
                    p-id="5442"
                  ></path></svg
              ></span>
              下降28%
              <span
                ><svg
                  t="1652686148103"
                  class="icon"
                  viewBox="0 0 1024 1024"
                  version="1.1"
                  xmlns="http://www.w3.org/2000/svg"
                  p-id="6679"
                  width="16"
                  height="16"
                >
                  <path
                    d="M448 789.312V0h128v789.312l234.688-234.624L896 640l-384 384-384-384 85.312-85.312L448 789.312z"
                    fill="#d81e06"
                    p-id="6680"
                  ></path></svg
              ></span>
            </div>
          </template>
          <template #charts>
             <ProgressCharts></ProgressCharts>
          </template>
        </Card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
//引入
import Card from "./Card";
import LineCharts from "./LineCharts";
import BarCharts from "./BarCharts";
import ProgressCharts from './ProgressCharts'
export default {
  name: "",
  components: {
    Card,
    LineCharts,
    BarCharts,
    ProgressCharts
  },
};
</script>

<style scoped lang="scss">
</style>
